<style lang="less">
    .learning-file {
        width: calc(100% - 20px);
        height: calc(100% - 70px);
        min-width: 1024px;
        margin-top: 10px;
        background-color: white;
        padding-top: 50px;
        font-size: 14px;

        .content {
            padding-bottom: 20px;
            display: flex;
            justify-content: space-between;
            margin-left: 40px;
            margin-right: 20px;

            .desc {
                .desc-item {
                    width: 280px;
                    padding: 4px 0;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                }

                .export-button {
                    margin-top: 15px;
                }
            }

            .chart {
                width: 500px;
                height: 250px;
            }
        }

        .tag-text {
            color: var(--global-color);
            font-weight: bold;
        }
    }
</style>

<template>
    <div class="learning-file">
        <div class="content">
            <div class="desc">
                <div class="desc-item">
                    <div>
                        学习阶段：<span class="tag-text">{{studyStartDate}} - {{studyEndDate}}</span>
                    </div>
                </div>
                <div class="desc-item">
                    <div> 培训任务完成总数：<span class="tag-text">{{studyStatus.taskCountOfFinished}}</span>个</div>
                    <div> 机构排名：第<span class="tag-text">{{studyStatus.taskFinishedRank}}</span>名</div>
                </div>
                <div class="desc-item">
                    <div> 业务通过笔数：<span class="tag-text">{{studyStatus.businessCountOfFinished}}</span>笔</div>
                    <div> 机构排名：第<span class="tag-text">{{studyStatus.businessPassedRank}}</span>名</div>
                </div>
                <el-button class="export-button"
                           type="success"
                           @click="exportClick('study')">
                    下载学习档案
                </el-button>
                <!-- 用于导出学习档案 -->
                <table-ex v-show="false"
                          ref="study"
                          table-id="studyStatus"
                          :rows="trainingRecords"
                          :columns="studyColumns" />
            </div>
            <div id='study'
                 class="chart" />
        </div>
        <div class="content">
            <div class="desc">
                <div class="desc-item">
                    <div>
                        考试阶段：<span class="tag-text">{{examStartDate}} - {{examEndDate}}</span>
                    </div>
                </div>
                <div class="desc-item">
                    <div> 考试任务完成总数：<span class="tag-text">{{examStatus.taskCountOfFinished}}</span>个</div>
                    <div> 机构排名：第<span class="tag-text">{{examStatus.taskFinishedRank}}</span>名</div>
                </div>
                <div class="desc-item">
                    <div> 业务通过笔数：<span class="tag-text">{{examStatus.businessCountOfFinished}}</span>笔</div>
                    <div> 机构排名：第<span class="tag-text">{{examStatus.businessPassedRank}}</span>名</div>
                </div>
                <el-button class="export-button"
                           type="success"
                           @click="exportClick('exam')">
                    下载考试档案
                </el-button>
                <!-- 用于导出考试档案 -->
                <table-ex v-show="false"
                          ref="exam"
                          table-id="examStatus"
                          :rows="examRecords"
                          :columns="examColumns" />
            </div>
            <div id='exam'
                 class="chart" />
        </div>
    </div>
</template>

<script>
    /**
     * 学习中心
     */
    import api from '@/api'
    import tableEx from '@/components/table/tableEx'

    // 引入echarts所需模块
    var echarts = require('echarts/lib/echarts')
    require('echarts/lib/chart/bar')
    require('echarts/lib/component/tooltip')
    require('echarts/lib/component/title')

    export default {
        name: 'learning-file',
        components: {
            'table-ex': tableEx
        },
        data() {
            return {
                studyStartDate: 'N/A',
                studyEndDate: 'N/A',
                examStartDate: 'N/A',
                examEndDate: 'N/A',
                studyStatus: {},
                examStatus: {},
                studyColumns: [
                    { prop: 'firstBusinessStartTime', label: '时间' },
                    { prop: 'taskName', label: '业务名称' },
                    { prop: 'businessCountOfAssigned', label: '业务总数' },
                    { prop: 'businessCountOfPassed', label: '业务通过总数' },
                    { prop: 'businessCountOfExcellent', label: '优秀业务数' },
                    { prop: 'businessCountOfGood', label: '良好业务数' },
                    { prop: 'businessCountOfNormal', label: '一般业务数' },
                    { prop: 'businessCountOfNotPassed', label: '未通过业务数' },
                    { prop: 'businessPassedRank', label: '机构排名' }
                ],
                examColumns: [
                    { prop: 'firstBusinessStartTime', label: '时间' },
                    { prop: 'examName', label: '考试名称' },
                    { prop: 'businessCountOfAssigned', label: '考试业务总数' },
                    { prop: 'businessCountOfPassed', label: '考试业务通过总数' },
                    { prop: 'businessCountOfExcellent', label: '考试优秀业务数' },
                    { prop: 'businessCountOfGood', label: '考试良好业务数' },
                    { prop: 'businessCountOfNormal', label: '考试一般业务数' },
                    { prop: 'businessCountOfNotPassed', label: '考试未通过业务数' },
                    { prop: 'businessPassedRank', label: '机构排名' },
                    { prop: 'sumScore', label: '考试总分' }
                ]
            }
        },
        mounted() {
            this.loadData()
        },
        computed: {
            trainingRecords() {
                return this.studyStatus && this.studyStatus.taskRecords
                    ? this.studyStatus.taskRecords.map(taskRecord => {
                        return {
                            firstBusinessStartTime: taskRecord.firstBusinessStartTime ? taskRecord.firstBusinessStartTime : 'N/A',
                            businessCountOfAssigned: taskRecord.businessCountOfAssigned,
                            businessCountOfExcellent: taskRecord.businessCountOfExcellent,
                            businessCountOfGood: taskRecord.businessCountOfGood,
                            businessCountOfNormal: taskRecord.businessCountOfNormal,
                            businessCountOfNotPassed: taskRecord.businessCountOfNotPassed,
                            businessCountOfPassed: taskRecord.businessCountOfPassed,
                            businessPassedRank: taskRecord.businessPassedRank ? taskRecord.businessPassedRank : 'N/A',
                            taskName: taskRecord.task.name
                        }
                    }) : []
            },
            examRecords() {
                return this.examStatus && this.examStatus.taskRecords
                    ? this.examStatus.taskRecords.map(taskRecord => {
                        return {
                            firstBusinessStartTime: taskRecord.firstBusinessStartTime ? taskRecord.firstBusinessStartTime : 'N/A',
                            businessCountOfAssigned: taskRecord.businessCountOfAssigned,
                            businessCountOfExcellent: taskRecord.businessCountOfExcellent,
                            businessCountOfGood: taskRecord.businessCountOfGood,
                            businessCountOfNormal: taskRecord.businessCountOfNormal,
                            businessCountOfNotPassed: taskRecord.businessCountOfNotPassed,
                            businessCountOfPassed: taskRecord.businessCountOfPassed,
                            businessPassedRank: taskRecord.businessPassedRank ? taskRecord.businessPassedRank : 'N/A',
                            sumScore: taskRecord.sumScore,
                            examName: taskRecord.task.name
                        }
                    }) : []
            }
        },
        methods: {
            // 导出Excel表格
            exportClick(el) {
                this.$refs[el].exportExcel()
            },

            loadData() {
                // 学习情况
                api.getStudyStatus({
                    loading: false,
                    method: 'get',
                    success: res => {
                        let data = res
                        console.log('success', res)
                        this.studyStartDate = data.firstBusinessStartTime ? data.firstBusinessStartTime.split(' ')[0] : 'N/A'
                        this.studyEndDate = data.lastBusinessEndTime ? data.lastBusinessEndTime.split(' ')[0] : 'N/A'
                        // this.studyStatus = pageConfig.studyStatus
                        this.studyStatus = res
                        let xAxisData = []
                        let taskFinish = []
                        let businessFinish = []
                        for (let item of data.taskRecords) {
                            if (item.firstBusinessStartTime && item.lastBusinessEndTime) {
                                let startMonth = item.firstBusinessStartTime ? parseInt(item.firstBusinessStartTime.split('-')[1]) : '-'
                                let endMonth = item.lastBusinessEndTime ? parseInt(item.lastBusinessEndTime.split('-')[1]) : '-'
                                item['taskName'] = item.task.title
                                item['businessCountOfNone'] =
                                    item.businessCountOfAssigned - item.businessCountOfPassed
                                xAxisData.push(`${startMonth} - ${endMonth}（月）`)
                                taskFinish.push(item.taskCountOfFinished)
                                businessFinish.push(item.businessCountOfFinished)
                            }
                        }
                        // 图表数据格式化
                        let chartOption = {
                            legend: {
                                data: ['任务完成数', '业务通过数']
                            },
                            xAxis: {
                                data: xAxisData
                            },
                            yAxis: [
                                {
                                    type: 'value',
                                    scale: true,
                                    name: '任务完成数',
                                    max: 10,
                                    min: 0,
                                    boundaryGap: [0.2, 0.2]
                                },
                                {
                                    type: 'value',
                                    scale: true,
                                    name: '业务通过数',
                                    max: 10,
                                    min: 0,
                                    boundaryGap: [0.2, 0.2]
                                }
                            ],
                            series: [
                                {
                                    name: '任务完成数',
                                    type: 'bar',
                                    data: taskFinish
                                },
                                {
                                    name: '业务通过数',
                                    type: 'bar',
                                    data: businessFinish
                                }
                            ]
                        }
                        this.drawChart('study', '个人学习情况', chartOption)
                    }
                })

                // 考试情况
                api.getExamStatus({
                    loading: false,
                    method: 'get',
                    success: res => {
                        console.log('getExamStatus', res)
                        let data = res
                        this.examStatus = res
                        this.examStartDate = data.firstBusinessStartTime ? data.firstBusinessStartTime.split(' ')[0] : 'N/A'
                        this.examEndDate = data.lastBusinessEndTime ? data.lastBusinessEndTime.split(' ')[0] : 'N/A'

                        let xAxisData = []
                        let examScore = []
                        let rank = []
                        if (!data.taskRecords) {
                            return
                        }
                        for (let item of data.taskRecords) {
                            if (item.firstBusinessStartTime && item.lastBusinessEndTime) {
                                let startMonth = item.firstBusinessStartTime ? parseInt(item.firstBusinessStartTime.split('-')[1]) : '-'
                                let endMonth = item.lastBusinessEndTime ? parseInt(item.lastBusinessEndTime.split('-')[1]) : '-'
                                item['examName'] = item.task.title
                                item['businessCountOfNone'] =
                                    item.businessCountOfAssigned - item.businessCountOfPassed
                                xAxisData.push(`${startMonth} - ${endMonth}（月）`)
                                examScore.push(item.sumScore)
                                rank.push(item.organizationRank)
                            }
                        }
                        // 图表数据格式化
                        let chartOption = {
                            legend: {
                                data: ['考试成绩', '组织排名']
                            },
                            xAxis: {
                                data: xAxisData
                            },
                            yAxis: [
                                {
                                    type: 'value',
                                    scale: true,
                                    name: '考试成绩',
                                    max: 100,
                                    min: 0,
                                    boundaryGap: [0.2, 0.2]
                                },
                                {
                                    type: 'value',
                                    scale: true,
                                    name: '组织排名',
                                    max: 10,
                                    min: 0,
                                    boundaryGap: [0.2, 0.2]
                                }
                            ],
                            series: [
                                {
                                    name: '考试成绩',
                                    type: 'bar',
                                    data: examScore
                                },
                                {
                                    name: '组织排名',
                                    type: 'bar',
                                    data: rank
                                }
                            ]
                        }
                        this.drawChart('exam', '个人考试情况', chartOption)
                    }
                })
            },

            //  绘制图表
            drawChart(el, title, option) {
                // 基于准备好的dom，初始化echarts实例
                let chart = echarts.init(document.getElementById(el))
                // 绘制数据
                chart.setOption({
                    title: {
                        text: title
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#283b56'
                            }
                        }
                    },
                    dataZoom: {
                        show: false,
                        start: 0,
                        end: 100
                    },
                    legend: option.legend,
                    xAxis: option.xAxis,
                    yAxis: option.yAxis,
                    series: option.series
                })
            }
        }
    }
</script>
